<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/ehome/static/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form" action="" id="editForm" lay-filter="editForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工号</label>
        <div class="layui-input-block">
            <input type="text" name="job_number" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>

<table class="layui-hide" id="test" lay-filter="test"></table>
<button class="layui-btn" id="delBatch">批量删除</button>


<script src="/ehome/static/layui.js" charset="utf-8"></script>
<script src="/ehome/static/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<!--给表格添加一个判断是否选中-->
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="hide" value="{{d.id}}" title="隐藏" lay-filter="hide" {{ d.id == 10006 ? 'checked' : '' }}>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table , form = layui.form;

        table.render({
            elem: '#test'
            // ,url:'/ehome/User/select2'
            ,url:'/ehome/sysUser/selectByPage'
            ,type:'get'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,limit:5    // 默认每页的记录数
            ,limits:[5,10,15]  // 每页记录数的备选项
            ,page: true
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', width:80, title: 'ID', sort: true}
                ,{field:'job_number', width:80, title: '工号', sort: true}
                ,{field:'name', width:80, title: '用户名'}
                ,{field:'created_date', width:180, title: '创建时间'}
                ,{field:'tel', title: '电话', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'visible', title:'是否隐藏', width:110, templet: '#checkboxTpl', unresize: true}
           ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                console.log(res)

                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });



        //监听锁定操作
       /* form.on('checkbox(hide)', function(obj){
           // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            layer.confirm('确认要隐藏该记录吗', {icon: 3, title:'提示'}, function(index){
                //do something
                console.log(obj)
                   console.log(index)
                ajax();
            });
        });*/

        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(test)', function(obj){

          //  console.log(obj)
            // 表单更新渲染
           // form.val("editForm", obj.data);


            // 显示一个弹出层,并且在弹出层上动态更新表单数据 : 显示动态渲染之后的内容
            /*layer.open({
                type: 1,
                content: $('#editForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });*/

           /*
            获取选中行的数据的示例
           var data = obj.data;
            layer.alert(JSON.stringify(data), {
                title: '当前行数据：'
            });
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');*/
        });

        $('#delBatch').on('click',function (){
            var checkStatus = table.checkStatus('test'); //idTest 即为基础参数 id 对应的值
           // console.log(checkStatus.data) //获取选中行的数据
          //  console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件

            // 先判断选中记录的长度, 大于0才继续操作,否则给用户提示: 没有选中任何记录
            if(checkStatus.data.length > 0 ){
                //准备一个保存所有id的空数组
                var ids = new Array();
                // 利用jquery的遍历方法
                $.map(checkStatus.data, function(e){   // e表示从checkStatus.data(数组), 执行迭代(遍历)
                    // 没得到一个id就压栈到数组中
                    ids.push(e.id);
                });

                // 用户是否确定要删除的确认
                layer.confirm("确定要删除选中项吗?", function(i){
                    if(i){
                        $.ajax({
                            url:'/ehome/delBatch.do'
                            ,type:'get'
                            ,data: {"ids":JSON.stringify(ids)}
                            ,dataType: "json"
                            ,success: function (res){
                                  // 表格执行重载(刷新数据)
                            }
                        })
                    }
                    layer.close(i)
                })
            }else{
                layer.alert('没有选中任何记录')
            }
        })


    });
</script>

</body>
</html>